<template>
  <div class="details">
    <h3 @click="changeLink(article.id)">{{ article.title }}</h3>
    <div class="abstract">{{ article.content }}</div>
    <div class="additions">
      <p>
        <span>
          <i class="iconfont icon-zuozhe2"></i>&nbsp;&nbsp;
          {{ article.name }}
        </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><i class="iconfont icon-biaoqian_top_right"></i>&nbsp;&nbsp;{{ article.tag }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><i class="iconfont icon-riqi"></i>&nbsp;&nbsp;{{ article.created_date }}</span>
      </p>
      <p>
        <span><i class="iconfont icon-yuedu1"></i>
          {{ article.read_num }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span><i class="iconfont icon-pinglun"></i> {{ 3 }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ArticleItem",
  props:{
    article:Object
  },
  methods:{
    changeLink(id){
      window.open("/detail?id=" + id)
    }
  }
}
</script>

<style scoped>
.details{
  position: relative;
  margin-top:15px;
  border-bottom:1px solid #D7DADB;
}

.details h3{
  text-decoration: none;
  color:#2C3E50;
  font-size:20px;
  cursor:pointer;
}
.details h3:hover{
  color:#FC4349;
}

.abstract{
  height:60px;
  color:#818181;
  font-size:16px;
  line-height:30px;
  text-indent: 2em;
  overflow: hidden;
}
.additions{
  height:20px;
  position: relative;
  margin-bottom: 5px;
}
.additions > p:first-child{
  float:left;
}
.additions > p:last-child{
  float:right;
}
.additions span{
  color:#6DBCDB;
  font-size:12px;
}


</style>
